<template>
	<view class="current_color">
		<view>
			<uni-search-bar class="uni-mt-10 top" radius="7" placeholder="自动显示隐藏" clearButton="auto" cancelButton="none"
				@confirm="search">
			</uni-search-bar>
		</view>

		<!-- <zlxls-goods-edit-list :status="loadStatus" :list="activityList"></zlxls-goods-edit-list> -->


		<simbalkj-list @gotoDetail="goToRuleDetail" :list-data="filteredRuleList" subTitleSize="200rpx"
			type="leftImage">
		</simbalkj-list>
	</view>

</template>

<script>
	import simbalkjList from "@/components/simbalkj-list/simbalkj-list.vue"
	import { getNoticeList } from '@/pages/api/seek.js'
	export default {
		components: {
			simbalkjList
		},
		data() {
			return {
				filteredRuleList: [],
				ruleList: [{
					title: '小区装修管理规定',
					subTitle: '业委会',
					image: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
					time: '2024-04-24',
					description: '描述'
				}, {
					title: '小区跳广场舞规定',
					subTitle: '广场舞',
					image: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
					time: '2024-04-24',
					description: '描述'
				}]
			}
		},
		methods: {
			search(res) {
				if (res.value.trim() === '') {
					this.filteredRuleList = this.RuleList
				} else {
					this.filteredRuleList = this.RuleList.filter(item => {
						return (
							item.title.includes(res.value) || item.content.includes(res.value)
						);
					});
				}
				
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			},
			change(e) {
				console.log("e:", e);
			},
			loadRuleList() {
				getNoticeList(3).then(data => {
					// 假设后端返回的数据结构为 { code: 200, message: 'success', data: [...] }  
					// 我们需要取到 data 字段，并对它进行转换以匹配前端的数据模型  
					const tmpRuleList = data.rows;
					this.ruleList = tmpRuleList.map(notice => {
						return {
							id: notice.noticeId,
							title: notice.noticeTitle,
							subTitle: '',
							content: notice.noticeContent,
							time: notice.updateTime,
							description: notice.remark
							// 可以继续添加其他需要转换的属性  
						};
					});
					this.filteredRuleList = this.ruleList;
					console.log(this.ruleList);
					// 处理数据...  
				}).catch(error => {
					console.error('Error fetching data with params:', error);
				});
			},
			goToRuleDetail(id) {
				uni.navigateTo({
					url: "notice_detail?id=" + encodeURIComponent(id) // 指定要跳转到的页面的路径  
				});
			}
		},
		onLoad() {
			this.loadRuleList();
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		}
	}
</script>

<style lang="scss">
	.current_color {
		background-color: #fff;
		// overflow: hidden;
	}

	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}

	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.uni-pb-5 {
		padding-bottom: 10px;
	}

	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}
</style>